<template>
    <div class="index">
        <!-- 1. 数据统计 -->
        <el-row :gutter="20">
            <el-col v-for="(item, index) in dataCount" :key="item.id" :span="6">
                <el-card class="box-card" shadow="hover">
                    <div class="d-flex align-items-center">
                        <i :class="[item.ico, item.bgColor]" class="text-center h4 text-white mb-0"
                            style="width: 40px; height: 40px; line-height: 40px;"></i>
                        <div class="ml-3">
                            <h4 class="mb-0">{{ item.num }}</h4>
                            <small class="text-muted">{{ item.desc }}</small>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-3">
            <!-- 2. 店铺及商品提示 -->
            <el-col :span="12" style="height: 370px;" class="d-flex flex-column">
                <el-card class="box-card mb-auto" shadow="never">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                        <el-button style="float: right; padding: 3px 0;" type="text">操作按钮</el-button>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                        <el-button style="float: right; padding: 3px 0;" type="text">操作按钮</el-button>
                    </div>
                    <div class="row">
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4>64</h4>
                                <small>出售中</small>
                            </button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <!-- 3. 数据统计图 -->
            <el-col :span="12">
                <el-card class="box-card" shadow="never" style="height: 370px;">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                        <el-button style="float: right; padding: 3px 0;" type="text">操作按钮</el-button>
                    </div>
                    <div class="text item"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'Index',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                dataCount: [{
                        id: 1,
                        ico: 'el-icon-user-solid',
                        num: '30',
                        desc: '关注人数（个）',
                        bgColor: 'bg-primary'
                    },
                    {
                        id: 2,
                        ico: 'el-icon-s-finance',
                        num: '120',
                        desc: '订单总数（笔）',
                        bgColor: 'bg-success'
                    },
                    {
                        id: 3,
                        ico: 'el-icon-s-order',
                        num: '4183.80',
                        desc: '今日订单总金额（元）',
                        bgColor: 'bg-danger'
                    },
                    {
                        id: 4,
                        ico: 'el-icon-s-data',
                        num: '100',
                        desc: '本月销量（笔）',
                        bgColor: 'bg-warning'
                    }
                ]
            };
        },
        methods: {

        },
        computed: {

        },
        components: {

        }
    };
</script>

<style scoped>

</style>